<script lang="ts" setup>
import { reactive, useTemplateRef } from 'vue'

interface Student {
  name: string
  age: string
  sex: string
  address: string
  banji: string
}
const tableData = reactive<Student[]>([
  {
    name: '王五',
    age: '',
    sex: '男',
    address: '北京市',
    banji: '1班'
  },
  {
    name: '张三',
    age: '未成年',
    sex: '',
    address: '开鲁县',
    banji: '2班'
  },
  {
    name: '李四',
    age: '',
    sex: '男',
    address: '通辽市',
    banji: ''
  }
])
const tableEditRef = useTemplateRef('tableEditRef')
const tableConfigEdit = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'input',
      label: '姓名',
      prop: 'name',
      width: 80
    },
    {
      type: 'switch',
      label: '年龄状态',
      prop: 'age',
      data: [
        { label: '未成年', value: '未成年' },
        { label: '成年', value: '成年' }
      ],
      inlinePrompt: true,
      isText: true,
      minWidth: 80
    },
    {
      label: '班级',
      prop: 'banji',
      type: 'input',
      isShow: true,
      rule: [
        {
          required: true,
          trigger: 'blur'
        },
        { min: 3, max: 5, message: '长度 3 到 5', trigger: 'blur' }
      ]
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'radio.button',
      rule: [
        {
          required: true,
          trigger: 'change'
        }
      ],
      data: [
        {
          label: '男',
          value: '男'
        },
        {
          label: '女',
          value: '女'
        }
      ]
    },
    {
      label: '地址',
      prop: 'address',
      type: 'select',
      data: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
        { label: '广州', value: 'guangzhou' }
      ],
      minWidth: 80
    },
    {
      label: '年月日',
      prop: 'date',
      type: 'date',
      rule: [
        {
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }
      ]
    },
    {
      label: '操作',
      type: 'operate',
      width: 160,
      buttons: props => [
        {
          label: '提交',
          isShow: props.row.age === '未成年',
          text: true,
          click: async props => {
            const tableData = await tableEditRef.value?.tableRef?.validate?.({ rows: props.$index })
            console.log(tableData)
          }
        },
        {
          label: '删除',
          type: 'primary',
          click: props => {
            console.log(props)
          }
        }
      ]
    }
  ]
})
</script>
<template>
  <XyTable ref="tableEditRef" :tableConfig="tableConfigEdit" :tableData="tableData" />
</template>
